<template>
  <div :id="componentId" :style="componentStyle"></div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    componentId: String,
    componentStyle: String,
    classifyNames: Array,
    classifyNums: Array,
  },
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    drawLine(){
      let dom = document.getElementById(this.componentId)
      let myChart = this.$echarts.init(dom)
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          top: '69%',
          right: 30,
          padding: 0,
          itemGap: 5,
          data: this.classifyNames
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['35%', '56%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{b}\n{c}',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            tooltip: {
              show: false,
            },
            data: this.classifyNums
          }
        ]
      }
      myChart.setOption(options)

      // let index = 0
      // let dataLength = this.classifyNums.length
      // let mTime = setInterval(() => {
      //   console.log(this.classifyNums, index)
      //   myChart.dispatchAction({
      //     type: 'downplay',
      //   })
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: index
      //   })
      //   index++
      //   if(index >= dataLength) {
      //     index = 0
      //   }
      // }, 2000)
    }
  }
}
</script>

